<template>
    <el-card class="!border-none " shadow="never">
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            <div class="grid grid-cols-4 gap-4">
                <div>
                    <el-form-item label="物流单号">
                        <el-input
                            placeholder="请输入物流单号"
                            
                            class="w-64"
                            v-model="queryFormData.logisticNumber"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                <div>
                    <el-form-item label="工单号">
                        <el-input
                            placeholder="请输入工单号"
                            
                            class="w-64"
                            v-model="queryFormData.afterSaleOrderNo"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="交易订单号">
                        <el-input
                            class="w-64"
                            placeholder="请输入用户交易订单号"
                            
                            v-model="queryFormData.orderNumber"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                <div v-if="!showMore">
                    <el-form-item label="工单类型">
                        <el-select class="w-64" v-model="queryFormData.afterSaleOrderType" placeholder="请选择工单类型"  @keyup.enter="resetOnePage">
                            <el-option v-for="item in afterSaleOrderConfig.afterSaleOrderType"
                                       :label="item.name"
                                       :value="item.code"
                                      />
                        </el-select>
                    
                    </el-form-item>
                </div>
                
                
                <div v-if="!showMore">
                    <el-form-item label="销售渠道" prop="channel">
                        
                        <el-select class="w-64" v-model="queryFormData.channel" placeholder="请输入销售渠道"
                                   clearable
                        >
                            <el-option v-for="item in channelSelect"
                                       :label="item.value"
                                       :value="item.name"
                                       @keyup.enter="resetOnePage"/>
                        </el-select>
                    
                    </el-form-item>
                </div>
                
                
                <div v-if="!showMore">
                    <el-form-item label="店铺名称" prop="shopName">
                        
                        
                        <el-select class="w-64" v-model="queryFormData.shopName" placeholder="请输入店铺名称"
                                   clearable
                        >
                            <el-option v-for="item in shopSelect"
                                       :label="item.value"
                                       :value="item.name"
                                       @keyup.enter="resetOnePage"/>
                        </el-select>
                    
                    </el-form-item>
                </div>
                
                
                <div v-if="!showMore">
                    <el-form-item label="用户名">
                        <el-input
                            class="w-64"
                            v-model="queryFormData.userName"
                            placeholder="请输入用户名"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                <div v-if="!showMore">
                    <el-form-item label="用户联系方式">
                        <el-input
                            class="w-64"
                            placeholder="请输入用户联系方式"
                            
                            v-model="queryFormData.userPhone"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <!--                做下拉-->
                <div v-if="!showMore">
                    <el-form-item label="工单来源">
                        
                        <el-select class="w-64" v-model="queryFormData.source" placeholder="请输入工单来源">
                            <el-option v-for="item in afterSaleOrderConfig.orderSourceConfig"
                                       :label="item.value"
                                       :value="item.name"
                                       @keyup.enter="resetOnePage"/>
                        </el-select>
                    </el-form-item>
                </div>
                
                <div v-if="!showMore">
                </div>
                <div v-if="!showMore">
                </div>
                
                <div class="flex flex-row-reverse">
                    <el-form-item>
                        <div class="flex-1  flex flex-row-reverse  w-full ">
                            <div class="mx-2 justify-center flex-row  flex items-center">
                                <el-dropdown v-if="showMore">
                              <span @click="putMenu">
                                    展开
                                 <icon name="el-icon-ArrowDown"/>
                              </span>
                                </el-dropdown>
                                <el-dropdown v-if="showMore!==true">
                              <span @click="putMenu">
                                    收起
                                 <icon name="el-icon-ArrowUp"/>
                              </span>
                                </el-dropdown>
                            
                            </div>
                            
                            
                            <el-button class="mx-2" type="primary" @click="getPageLists">查询</el-button>
                            <el-button class="mx-2" @click="resetParams">重置</el-button>
                        
                        </div>
                    
                    </el-form-item>
                </div>
            
            </div>
        </el-form>
    </el-card>
    
    
    <el-card class="!border-none mt-5" shadow="never">
        <div class="flex">
            <div class="flex-1">
                <el-button type="primary" @click="handleCreateOrder()">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    创建工单
                </el-button>
                
                <el-button @click="handleCreateCooperate()">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    创建外呼
                </el-button>
            </div>
            
            <div class="mt-2 flex justify-end">
                <el-tag
                    class="mx-2 hover:text-danger hover:bg-warning   cursor-pointer"
                    @click="getCurrentStatus(null)"
                    effect="light"
                    round
                    type="info">
                    全部
                </el-tag>
                
                <el-tag v-for="(item,index) in afterSaleOrderConfig.afterSaleOrderStatus"
                        class="mx-2 hover:text-danger hover:bg-warning   cursor-pointer"
                        @click="getCurrentStatus(item.code)"
                        effect="light"
                        :key="index"
                        round
                        type="info">
                    {{ item.name }}
                </el-tag>
            </div>
        </div>
        
        
        <el-table
            ref="tableRef"
            size="large"
            class="mt-2"
            v-loading="pagerData.loading"
            :data="pagerData.lists"
            row-key="id"
        >
            <el-table-column label="订单号" fixed prop="orderNumber" :show-overflow-tooltip="true" min-width="200"/>
            <el-table-column label="工单号" prop="afterSaleOrderNo" min-width="170"/>
            
            <el-table-column label="状态" prop="status" min-width="120">
                <template #default="{ row }">
                    
                    <el-tag v-for="(item,index) in afterSaleOrderConfig.afterSaleOrderStatus"
                            v-show="row.status === item.code"
                            :key="index"
                            :disable-transitions="true"
                            :type="item.type">
                        {{ item.name }}
                    </el-tag>
                </template>
            </el-table-column>
            
            <el-table-column label="类型" prop="afterSaleOrderType" :formatter="formatterOrderType" min-width="150">
            
            </el-table-column>
            <el-table-column label="来源" prop="source" :formatter="formatterReSource"
                             min-width="120"></el-table-column>
            
            
            <el-table-column label="渠道" prop="channel" min-width="120"
                             :formatter="formatterChannel"></el-table-column>
            
            
            <el-table-column label="店铺" prop="shopName" min-width="120" :formatter="formatterShop"></el-table-column>
            
            
            <el-table-column label="用户名称" prop="userName" min-width="120"/>
            <el-table-column label="用户电话" prop="userPhone" min-width="150"/>
            
            <el-table-column label="寄送物流公司" prop="logisticCompany" min-width="120"/>
            <el-table-column label="寄送物流单号" prop="logisticNumber" min-width="160"/>
            
            <el-table-column label="建单时间" prop="createTime " min-width="180" :formatter="formatterCreateTime"/>
            <el-table-column label="操作人" prop="optPerson" min-width="150"/>
            
            <el-table-column label="操作" width="170" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="handleRowDetail(row)"
                    >
                        详情
                    </el-button>
                    
                    
                    <el-button
                        v-if="row.status === 'CREATE'|| row.status === 'WAIT_MALL' "
                        type="primary"
                        link
                        @click="handleEdit(row)"
                    >
                        编辑
                    </el-button>
                    
                    
                    <el-button
                        v-if="row.status === 'CREATE'|| row.status === 'WAIT_MALL' "
                        type="danger"
                        link
                        @click="handleDelete(row)"
                    >
                        关闭
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination v-model="pagerData" @change="getPageLists"/>
    
    </el-card>
    
    
    <Detail ref="detailRef" @close="showDetailRef=false" v-if="showDetailRef"/>

</template>

<script lang='ts' setup>


import {usePagerManager} from "@/manager/base/PagerManager";


import router from "@/base/router";
import routerManager from "@/manager/base/RouterManager";
import feedback from "@/utils/feedback";
import Detail from '@/components/order-detail/detail.vue'
import {closeAfterSaleOrder} from "@/api/afterSale/order/AfterSaleOrderController";
import {getAfterSaleListsByPage} from "@/api/afterSale/order/AfterSaleOrderListController";
import {UnwrapNestedRefs} from "@vue/reactivity";

import {AfterSaleOrderDetailDTO} from "@/api/afterSale/order/dto/AfterSaleOrderDetailDTO";
import {useFormatterManager} from "@/manager/base/FormatterManager";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import AfterSaleOrderSearchRequest from "@/api/afterSale/order/request/AfterSaleOrderSearchRequest";

const detailRef = shallowRef(Detail)
const showMore = ref(true)
const showDetailRef = ref(false)


/**
 * 获取售后配置信息
 *
 * @author 徐寿春
 * 2023/4/11 17:31
 */
let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);


/**
 * 监听渠道 监听店铺
 *
 * @author 徐寿春
 * 2023/4/12 08:35
 */
const shopSelect = computed(() => {
    return formatterManager.computeFormatterShop(queryFormData.channel)
})

const channelSelect = computed(() => {
    return formatterManager.computeFormatterChannel(queryFormData.shopName)
})


/**
 * 处理格式转化
 *
 * @author 徐寿春
 * 2023/4/11 17:04
 */
const {
    formatterCreateTime,
    formatterChannel,
    formatterReSource,
    formatterOrderType,
    formatterShop
} = useFormatterManager(afterSaleOrderConfig);

/**
 * 定义查询数据
 */
let queryFormData: UnwrapNestedRefs<AfterSaleOrderSearchRequest> = reactive(new AfterSaleOrderSearchRequest())


/**
 * 获取分页数据
 */
const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getAfterSaleListsByPage,
    params: queryFormData
})


/**
 * 创建系统工单
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
function handleCreateOrder() {
    let routePathByName = routerManager.getRoutePathByName("afterSaleOrder/order/orderList/create");
    if (!!routePathByName) {
        router.push(routePathByName)
    }
}

/**
 *  创建协同工单
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
function handleCreateCooperate() {

}


/**
 *  编辑当前工单
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
async function handleEdit(row: any) {
    let routePathByName = routerManager.getRoutePathByName("afterSaleOrder/order/orderList/edit");
    if (!!routePathByName) {
        await router.push({path: routePathByName, query: {id: row.afterSaleOrderId}});
    }
}

/**
 *  删除工单
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
async function handleDelete(row: any) {
    await feedback.confirm("确定关闭当前工单？")
    await closeAfterSaleOrder({id: row.afterSaleOrderId})
    await getPageLists()
}


/**
 *  收起展开菜单
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
function putMenu() {
    showMore.value = !showMore.value
}


/**
 *  获取当前状态 -- 点击
 *
 * @author 徐寿春
 * 2023/4/6 13:44
 */
function getCurrentStatus(row: any) {
    queryFormData.status = row
    getPageLists()
}


// ------------------------------------------ ** 处理详情 ** ------------------------------------------------------------------------------------


/**
 *  处理详情页
 *
 * @author 徐寿春
 * 2023/4/6 13:45
 */
async function handleRowDetail(row: AfterSaleOrderDetailDTO) {
    showDetailRef.value = true
    await nextTick()
    detailRef.value?.open(row.afterSaleOrderId)
}


/**
 * 获取工单列表
 */
onMounted(() => {
    getPageLists()
    
})


</script>

